<template>
  <div class="main" v-loading="loadingLogin">
    <el-card class="container_form">
      <el-form
        class="login_form"
        label-width=""
        :model="form"
        :rules="rules"
        ref="form"
      >
        <el-form-item>
          <h1>
            <img
              src="@/assets/image/heimaLogo.png"
              alt=""
              style="padding-right: 10px"
            />黑马面面 用户登陆
          </h1>
        </el-form-item>

        <!-- 手机号 -->
        <el-form-item label="" prop="phone">
          <el-input
            v-model.trim="form.phone"
            placeholder="请输入手机号"
            @keyup.enter.native="login"
          >
            <i class="el-icon-user" slot="prefix"> </i>
          </el-input>
        </el-form-item>

        <!-- 密码 -->
        <el-form-item label="" prop="password">
          <!-- el-icon-lock -->
          <el-input
            v-model.trim="form.password"
            placeholder="请输入密码"
            @keyup.enter.native="login"
            show-password
          >
            <i class="el-icon-lock" slot="prefix"> </i>
          </el-input>
        </el-form-item>

        <!-- 验证码 -->
        <el-form-item label="" prop="code">
          <div style="display: flex; justify-content: space-between">
            <el-input
              v-model.trim="form.code"
              style="width: 50%"
              placeholder="请输入验证码"
              @keyup.enter.native="login"
              :disabled="loadingCode"
            >
              <i class="el-icon-key" slot="prefix"> </i>
            </el-input>
            <div v-loading="loadingCode" style="width: 45%; line-height: 0">
              <img
                src=""
                alt=""
                style="width: 100%; cursor: pointer"
                @click="refreshCode"
                ref="code"
              />
            </div>
          </div>
          <!-- placeholder for verification code image -->
          <!-- {{'123' + codeGenerator()}} -->
        </el-form-item>

        <el-form-item prop="contract">
          <el-checkbox
            v-model.trim="form.contract"
            :checked="form.contract"
            @keyup.enter.native="login"
          >
            我已阅读并同意<el-button
              type="text"
              @click="showContractDetail('用户协议')"
              >用户协议</el-button
            >和<el-button
              type="text"
              style="margin: 0"
              @click="showContractDetail('隐私条款')"
              >隐私条款</el-button
            >
            <!-- <el-link href="#" type="primary" target="_blank">
            用户协议
          </el-link>
          和
          <el-link href="#" type="primary">
            隐私条款
          </el-link> -->
          </el-checkbox>
        </el-form-item>

        <el-form-item>
          <el-button
            class="starterBtns"
            type="primary"
            @click.native="login"
            ref="login"
            >登录</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button class="starterBtns" type="primary" @click.native="register"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <img :src="require('@/assets/image/heimaLoginBG.png')" alt="" style="" />
    <REGISTER ref="registerComponent"></REGISTER>
    <CONTRACT ref="contractComponent" :title="title"></CONTRACT>
  </div>
</template>

<script>
// import REGISTER from './components/register.vue'
import { postLoginAPI } from '@/api/login'
import request from '@/utils/request'
// import { postTokenAPI } from '@/api/user'

export default {
  name: 'loginIndex',
  components: {
    REGISTER: () => import('./components/register.vue'),
    CONTRACT: () => import('./components/contract.vue')
  },
  data () {
    return {
      loadingLogin: false,
      loadingCode: false,
      title: '',
      // isShow: false,
      form: {
        // 上线后需要更改为空 todos
        phone: '15500000155',
        password: '123456',
        code: '', // 验证码
        contract: false // 阅读条款 此项不做更改
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern:
              /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '请输入正确的手机号',
            trigger: ['blur', 'change']
          }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          {
            pattern: /^\d{4}$/,
            message: '请检查验证码',
            trigger: ['blur', 'change']
          }
        ], // 验证码
        contract: [
          {
            validator: (rule, value, callback) => {
              return value ? callback() : callback(new Error('请勾选协议'))
            },
            // message: '请勾选协议',
            trigger: 'change'
          }
        ]
      }
    }
  },
  created () {
    // this.codeGenerator()
    this.refreshCode()
  },
  beforeDestroy () {
    this.loadingLogin = false
  },
  methods: {
    login () {
      this.$refs.form.validate(async v => {
        if (v) {
          this.loadingLogin = true
          try {
            const res = await postLoginAPI(this.form)
            const token = res.data.token
            this.$store.dispatch('user/SET_TOKEN', token)

            // 在这里前往首页
            this.$router.push('/')
            this.$message.success('登录成功')
          } catch {
            this.refreshCode()
            this.loadingLogin = false
          }
        } else {
          this.refreshCode()
          this.loadingLogin = false
        }
      })
    },

    // 刷新验证码
    async refreshCode () {
      this.$nextTick(() => {
        this.$refs.code.src = process.env.VUE_APP_BASE_URL + '/captcha?type=login'
      }) 
      this.loadingCode = false
    },

    register () {
      this.$refs.registerComponent.isShow = true
      this.$refs.registerComponent.refreshCode()
    },
    showContractDetail (title) {
      this.title = title
      this.$refs.contractComponent.isShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: space-around;
  background: linear-gradient(#1493fa 28%, #01c6fa 96%);
  .container_form {
    width: 400px;
    background-color: #f5f5f5;
    .starterBtns {
      width: 100%;
    }
    ::v-deep .el-link {
      vertical-align: baseline;
    }
  }
}
</style>
